<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/three.css">
</head>

<body>
    <div class="root">

        <div class="q1">
            <img src="../创家盛典/img/img-5.png" alt=""></div>
        <div class="q2"><img src="../创家盛典/img/group4.png" alt=""></div>
        <div class="q3"><img src="../创家盛典/img/grounp4.png" alt=""></div>
        <div class="q4"><img src="../创家盛典/img/group2.png" alt=""></div>
        <div class="q5"><img src="../创家盛典/img/grounp4.png" alt=""></div>
        <img id="q6" src="../创家盛典/img/img3.png" alt="">
        <img id="q7" src="../创家盛典/img/img4.png" alt="">
        <img id="q8" src="../创家盛典/img/img5.png" alt="">

    </div>
    <div class="bottom"><img src="./创家盛典/images/pageone/slide.png" alt=""></div>
</body>

</html>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/touch-0.2.14.min.js"></script>

<script>
    function dm() {
        // console.log("hh")
        $(".bottom img").animate({
            bottom: 3 + "rem"
        }, 500, )

        $(".bottom img").animate({
            bottom: 2 + "rem"
        }, 500)

    };
    dm();
    setInterval(dm, 1000);
    touch.on(window, "swipeup", function() {
        window.open("./four.html", '_self');
        // console.log("jjj");
    })

    function dong() {
        $(".q1").animate({
            top: 4 + "rem",
            left: 11 + "rem"
        }, 1000)
        $(".q1").animate({
            top: 3.5 + "rem",
            left: 11.22 + "rem"
        }, 800)
        $(".q2").animate({
            top: 10 + "rem",
            left: 0.5 + "rem"
        }, 1000)
        $(".q2").animate({
            top: 10.7 + "rem",
            left: 1 + "rem"
        }, 800)
        $(".q3").animate({
            top: 19 + "rem",
            left: 11 + "rem"
        }, 1000)
        $(".q3").animate({
            top: 19.3 + "rem",
            left: 11.6 + "rem"
        }, 800)
        $(".q4").animate({
            top: 20 + "rem",
            left: 1 + "rem"
        }, 1000)
        $(".q4").animate({
            top: 20.33 + "rem",
            left: 1.2 + "rem"
        }, 800)
        $(".q5").animate({
            top: 30 + "rem",
            left: 12.5 + "rem"
        }, 1000)
        $(".q5").animate({
            top: 30.8 + "rem",
            left: 12 + "rem"
        }, 800)
    }
    dong();
    setInterval(dong, 1000)
    console.log($(".root img:lt(5)", ))
</script>